<template>
	<view class="content">
	  <view class="robotCont">
		<image
		  :src="`${OSS_URL}/urm/bindDevice/jqr.png`"
		  class="robot"
		  mode="scaleToFill"
		/>
		<image
		  :src="`${OSS_URL}/urm/bindDevice/jqrMsg.png`"
		  class="robotMsg"
		  mode="scaleToFill"
		/>
	  </view>
	  <!-- 流程 -->
	  <view class="process">
		<view class="title">
		  <image
			class="UnionLeft"
			:src="`${OSS_URL}/urm/bindDevice/Union.png`"
			mode="scaleToFill"
		  />
		  <text>扫码绑定流程</text>
		  <image
			class="UnionRight"
			:src="`${OSS_URL}/urm/bindDevice/Union.png`"
			mode="scaleToFill"
		  />
		</view>
		<!-- list -->
		<view class="list" v-for="(item, index) in stepList" :key="index">
		  <view class="num">{{ item.num }}</view>
		  <view class="cont">
			<view class="contentRight">
			  <text class="lest">{{ item.title }}</text>
			  <text class="lestCont">{{ item.content }}</text>
			</view>
		  </view>
		</view>
  
		<!--扫码 -->
		<view class="QRbutton" @click="queryBinding">
		  <wd-icon name="scan1" size="22px"></wd-icon>
		  <text class="QRbuttonText">扫描二维码</text>
		</view>
	  </view>
  
	  <wd-popup v-model="show" custom-style="border-radius: 10px;">
		<view class="popuCont">
		  <text class="title">请确定您要绑定的项目</text>
  
		  <view class="option">
			<view
			  class="item"
			  :class="{ Select: item2.show }"
			  v-for="(item2, index2) in bindProject"
			  :key="index2"
			  @click="SelectProject(index2)"
			>
			  <text>{{ item2.name }}</text>
			  <image :src="item2.icon" class="icons" mode="scaleToFill" />
			  <image
				class="SelectIcon"
				:src="
				  item2.show
					? `${OSS_URL}/urm/bindDevice/SelectIcon.png`
					: `${OSS_URL}/urm/bindDevice/NoSelectIcon.png`
				"
				mode="scaleToFill"
			  />
			</view>
		  </view>
		  <view class="contList" v-for="(itCont ,itIndex) in contList" :key="itIndex">
			  <text>·</text>
			  <view>{{ itCont }}</view>
		  </view>
  
		  <!-- 确认 -->
		  <view class="confirm" @click="determine">确定</view>
		</view>
	  </wd-popup>
	</view>
  
	<!-- 绑定弹框 -->
  </template>
  
  <script setup lang="ts">
  import { ref } from "vue";
  import { getCurInfo } from "@/api"
  const OSS_URL = import.meta.env.VITE_OSS_HOST;
  const show = ref(false);
  const QRCode = ref('m10ybf240422080');//扫码结果
  const childUserIds  = ref("28");
  const stepList = ref([
	{
	  num: "01",
	  title: "第一步",
	  content: "启用设备端，来到「设置」界面；",
	},
	{
	  num: "02",
	  title: "第二步",
	  content: "点击「关于设备」，获取二维码，先扫码关注公众号；",
	},
	{
	  num: "03",
	  title: "第一步",
	  content:
		"进入公众号，点击「学小乐管理端」扫码绑定，扫描二维码选择绑定设备/账号。",
	},
  ]);
  
  // 绑定项目
  const bindProject = ref([
	{
	  name: "当前设备",
	  show: false,
	  icon: `${OSS_URL}/urm/bindDevice/bindIcon1.png`,
	},
	{
	  name: "孩子账号",
	  show: false,
	  icon: `${OSS_URL}/urm/bindDevice/bindIcon2.png`,
	},
  ]);
  
  const contList = ref([
	"第一个绑定设备/帐号的用户自动成为管理员",
	"绑定账号可以查看孩子的学情报告；",
	"绑定设备可以对设备进行管控。",
  ]);


 async function queryBinding(){
	const { data} = await getCurInfo({
		simSerialNumber:QRCode.value,//设备序列号
		childUserId:childUserIds.value//孩子账号
	})
	console.log('xxxx',data)
	show.value = true
  }
  
  function SelectProject(e) {
	bindProject.value[e].show = !bindProject.value[e].show;
  }
  
  function determine(){
	  show.value = false
	  uni.navigateTo({ url: './familyRelationships' })
  }
  </script>
  
  <style lang="scss" scoped>
  .content {
	width: 100%;
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-image: url("https://xuexiaole-1313840333.cos.ap-guangzhou.myqcloud.com/xuexiaoleClient/urm/bindDevice/bindDeviceBgImg.png");
	background-size: cover;
  
	.robotCont {
	  width: 100%;
	  // margin-top: 40upx;
	  display: flex;
	  z-index: 1;
  
	  .robot {
		width: 250upx;
		height: 312upx;
	  }
	  .robotMsg {
		width: 486upx;
		height: 220upx;
		margin-top: 30upx;
		margin-left: -30upx;
	  }
	}
	.process {
	  width: 690upx;
	  height: 1016upx;
	  margin-left: 30upx;
	  display: flex;
	  z-index: 0;
	  flex-direction: column;
	  align-items: center;
	  border-radius: 20upx;
	  border: 1upx rgba(255, 255, 255, 0.3);
	  background: rgba(255, 255, 255, 0.5);
	  backdrop-filter: blur(2.9000000953674316upx);
	  margin-top: -77upx;
	  padding: 40upx 30upx;
	  box-sizing: border-box;
	  .title {
		display: flex;
		align-items: center;
		gap: 20upx;
		.UnionLeft {
		  width: 35upx;
		  height: 8upx;
		}
  
		text {
		  font-size: 36upx;
		  color: #333;
		  font-weight: 500;
		}
  
		.UnionRight {
		  width: 35upx;
		  height: 8upx;
		  transform: rotate(180deg);
		}
	  }
  
	  .list {
		width: 630upx;
		// height: 157upx;
		display: flex;
		align-items: center;
		position: relative;
		margin-top: 40upx;
  
		.num {
		  width: 125upx;
		  height: 60upx;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  font-size: 48upx;
		  color: #fff;
		  background: #615dff;
		  border-radius: 0 50upx 50upx 0;
		  position: absolute;
		  left: 0upx;
		  top: 20upx;
		}
		.cont {
		  width: 610upx;
		  // height: 157upx;
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  border-radius: 20upx;
		  background: rgba(255, 255, 255, 0.8);
		  margin-left: 20upx;
		  padding: 30upx;
		  box-sizing: border-box;
  
		  .contentRight {
			width: 450upx;
			display: flex;
			flex-direction: column;
			margin-left: 90upx;
			.lest {
			  font-size: 32upx;
			  height: 48upx;
			}
			.lestCont {
			  color: #666;
			  font-size: 30upx;
			}
		  }
		}
	  }
  
	  .QRbutton {
		width: 610upx;
		height: 90upx;
		background: #615dff;
		border-radius: 20upx;
		margin-top: 60upx;
		color: #fff;
		font-size: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
  
		.QRbuttonText {
		  margin-left: 10upx;
		  font-size: 30upx;
		}
	  }
	}
  }
  
  .popuCont {
	width: 594upx;
	height: 592upx;
	background: #fff;
	border-radius: 20upx;
	padding: 50upx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	// justify-content: center;
  
	.title {
	  font-size: 34upx;
	  color: #333;
	}
  
	.option {
	  width: 100%;
	  display: flex;
	  align-items: center;
	  gap: 30upx;
	  margin-top: 50upx;
	  margin-bottom: 20upx;
	  .item {
		flex: 1;
		height: 120upx;
		background-image: url("https://xuexiaole-1313840333.cos.ap-guangzhou.myqcloud.com/xuexiaoleClient/urm/bindDevice/bindPorjectBgimg.png");
		background-size: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: rgba(65, 78, 145, 1);
		font-size: 26upx;
		border-radius: 20upx;
		position: relative;
		border: 1upx solid transparent;
		.icons {
		  width: 54upx;
		  height: 54upx;
		  margin-left: 20upx;
		}
  
		.SelectIcon {
		  width: 40upx;
		  height: 40upx;
		  position: absolute;
		  bottom: 0;
		  right: 0;
		}
	  }
  
	  .Select {
		border: 1upx solid rgba(97, 93, 255, 1);
	  }
	}
	.contList{
	  width: 100%;
	  display: flex;
	  font-size: 26upx;
	  color: rgba(51, 51, 51, 1);
	  line-height: 39upx;
	}
  
	.confirm{
	  position: absolute;
	  bottom: 0upx;
	  width: 100%;
	  height: 108upx;
	  border-top: solid 1upx rgba(238, 238, 238, 1);
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-size: 34upx;
	  color: rgba(51, 51, 51, 1);
	}
  }
  </style>
	